<template>
    <div class="my-tag">
    <input
    v-focus
    v-if="isEdit"
    class="input"
    @keyup.enter="handleCommit"
    @blur="handleCommit"
    type="text"
    placeholder="输入标签"
    />
    <div v-else @dblclick="enterEdit" class="text">{{ value }}</div>
</div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isEdit: false,
        }
    },
    methods: {
        handleCommit(e) {
            // console.log(e);
            this.$emit('input', e.target.value)
            
            this.isEdit = false
        },
        enterEdit() {
            this.isEdit = true
        }
    }

}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>